<template>
	<view class="qilin-changeCityAlphabet">
		<view class="qilin-changeCityAlphabet-box" v-for="(item,index) in citys" :key="item.initial">
			<view class="qilin-changeCityAlphabet-item" hover-class="hover" @click="changeCity(item.initial)"
				@touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :id="index==0?'start':''"
			>{{item.initial}}</view>
		</view>
	</view>
</template>

<script>
	let Timer=null;
	export default {
		name:"changeAlphabet",
		props:["citys"],
		data() {
			return {
				touching:false,//表示当前是否处于触摸状态
			};
		},
		methods:{
			//点击字母跳转到相应城市
			changeCity(data){
				this.$emit("changeCity",data);
			},
			touchStart(){
				this.touching=true;
			},
			touchMove(e){
				if(this.touching){
					// console.log(e);
					// this.$nextTick(()=>{
						clearTimeout(Timer);
						Timer=setTimeout(()=>{
							let start=uni.createSelectorQuery().in(this).select("#start");
							start.boundingClientRect((data)=>{
								// console.log(data);
								let index=Math.floor((e.changedTouches[0].clientY-data.top)/20);
								if(index>=0 && index<=this.citys.length){
									this.$emit("changeCity",this.citys[index].initial);
								};
							}).exec();
						},30);
					// })
				}
			},
			touchEnd(){
				this.touching=false;
			}
		}
	}
</script>

<style>
.qilin-changeCityAlphabet{
	position: fixed;
	top:50%;
	right:0;
	transform:translateY(-50%);
	color:#fff;
	font-size:20rpx;
}
.qilin-changeCityAlphabet-box{
	width:40rpx;
}
.qilin-changeCityAlphabet-item{
	text-align:center;
	padding:6rpx 2rpx;
}
.hover{
	font-size:36rpx;
}
</style>
